<template>
	<view class="points-details">
		<view class="list">
			<view class="item">
				<view class="left">
					<view class="category">邀请好友下单</view>
					<view class="time">2023/04/20 13:20:20</view>
				</view>
				<view class="num">+21</view>
			</view>
			<view class="item">
				<view class="left">
					<view class="category">邀请好友下单</view>
					<view class="time">2023/04/20 13:20:20</view>
				</view>
				<view class="num">+21</view>
			</view>
			<view class="item">
				<view class="left">
					<view class="category">兑换礼品</view>
					<view class="time">2023/04/20 13:20:20</view>
				</view>
				<view class="num on">-21</view>
			</view>
			<view class="item">
				<view class="left">
					<view class="category">邀请好友下单</view>
					<view class="time">2023/04/20 13:20:20</view>
				</view>
				<view class="num">+21</view>
			</view>
		</view>
		
		<view class="end">别滑啦，已经到底了～</view>
	</view>
	
</template>

<script>
	
</script>

<style lang="scss">
	
	page {
		background: #ffffff;
	}
	
	.points-details {
		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 32rpx 0;
			margin: 0 24rpx;
			
			&~.item {
				border-top: 2rpx solid #F5F5F5;
			}
			
			&:last-child {
				padding-bottom: 0;
			}
			
			.left {
				.category {
					font-size: 32rpx;
					font-weight: bold;
					color: #1F1F1F;
					line-height: 32rpx;
					padding-bottom: 24rpx;
				}
				
				.time {
					font-size: 24rpx;
					color: #999999;
					line-height: 24rpx;
				}
			}
			
			.num {
				font-size: 40rpx;
				font-family: D-DIN-Bold, D-DIN;
				font-weight: bold;
				color: #1F1F1F;
				line-height: 40rpx;
			}
			
			.on {
				font-size: 40rpx;
				font-family: D-DIN-Bold, D-DIN;
				font-weight: bold;
				color: #FF1F2E;
				line-height: 40rpx;
			}
		}
		
		.end {
			margin-top: 48rpx;
			font-size: 24rpx;
			color: #999999;
			line-height: 34rpx;
			text-align: center;
		}
	}
	
	
</style>